<template>
	<view class="list-contaienr">
		<bgImg></bgImg>
		<bottomFill></bottomFill>
		<tabBar :selectIndex="2"></tabBar>
		<view class="list-contaienr-the" >
			<image :src="'http://192.168.1.181:8000/c' + theLuckyDraw.imagePath" class="prize" v-if="theLuckyDraw"></image>
			<text class="money" v-if="theLuckyDraw">{{theLuckyDraw.prize}}</text>
			<text class="number" v-if="theLuckyDraw">x<text class="number-num" v-if="theLuckyDraw">{{theLuckyDraw.amount}}</text>名</text>
		</view>
		<view class="list-container-winning">
			<view class="" v-if="!theWinners">
				抽奖未开始，尽请期待！
			</view>
			<view class="box" v-if="theWinners">
				<view class="item" v-for="item,index1 in specialAward.winners" :key="index1">
					<text class="prize">特等奖</text>
					<text class="money">5000元</text>
					<text class="symbol">--------------</text>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="item" v-for="item,index2 in firstPrize.winners" :key="index2">
					<text class="prize">一等奖</text>
					<text class="money">3000元</text>
					<text class="symbol">--------------</text>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="item" v-for="item,index3 in secondPrize.winners" :key="index3">
					<text class="prize">二等奖</text>
					<text class="money">2000元</text>
					<text class="symbol">--------------</text>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="item" v-for="item,index4 in thirdPrize.winners" :key="index4">
					<text class="prize">三等奖</text>
					<text class="money">1000元</text>
					<text class="symbol">--------------</text>
					<text class="name">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getInfo from "@/api/getInfo.js"; //获取当前奖项信息，当前什么奖，上一个什么奖，下一个什么奖
	import getList from "@/api/getList.js" //获取中奖名单
	export default {
		onLoad(){
			
			// 路由守卫
			uni.getStorage({
			    key: 'isLogin',
			    fail: function (res) {
			        // console.log(res.data);
					uni.redirectTo({
						url:"/pages/login/login"
					})
			    }
			});
			uni.getStorage({
				key:"lotteryBegan",
				success:(result) => {
					
					if(result.data){
						// 获取当前奖项信息，当前什么奖，上一个什么奖，下一个什么奖
						getInfo().then(r => {
							if(r.data.data.next){
								this.theLuckyDraw = r.data.data.next.prize
							}
						})
						getList().then(r => {
							this.theWinners = true
							this.thirdPrize = r.data.data[0]
							console.log(this.thirdPrize.prize.prize,this.thirdPrize.winners)
							this.secondPrize = r.data.data[2]
							this.firstPrize = r.data.data[3]
							this.specialAward = r.data.data[4]
						})
					}
				},
				
				fail:() => {
					// 没有抽奖即将进行
					this.theLuckyDraw = false
					// 没有中奖名单
					this.theWinners = false
					// 特等奖
					this.specialAward = {}
					// 一等奖
					this.firstPrize = {}
					// 二等奖
					this.secondPrize = {}
					// 三等奖
					this.thirdPrize = {}
				}
				
			})
		},
		created(){
			this.totalLotteryBegan
		},
		data() {
			return {
				// 没有抽奖即将进行
				theLuckyDraw:false,
				// 没有中奖名单
				theWinners:false,
				// 特等奖
				specialAward:{},
				// 一等奖
				firstPrize:{},
				// 二等奖
				secondPrize:{},
				// 三等奖
				thirdPrize:{},
			}
		},
		computed:{
		},
		methods: {
			
			
		},
	}
</script>

<style scoped lang="less">
.list-container{
	position:relative;
	width:100vw;
	height:100vh;	
}
.list-contaienr-the{
	position:absolute;
	top:2%;
	left:50%;
	transform: translateX(-50%);
	width:80%;
	height:110rpx;
	background-image: url("@/static/list/the.png");
	background-size:100% 100%;
	background-repeat:no-repeat;
	display:flex;
	justify-content: center;
	align-items:center;
	color:#fff;
	.prize{
		margin-top:30rpx;
		width:20%;
		height:30rpx;
	}
	.number{
		margin-top:26rpx;
		color:#FFCC00;
	}
	.money{
		margin:26rpx 30rpx 0rpx;
	}
}
.list-container-winning{
	position:absolute;
	top:calc(50% + 1%);
	left:50%;
	transform: translate(-50%, -50%);
	width:90%;
	height:75%;
	background-image: url("@/static/list/list-bg.png");
	background-size:100% 100%;
	background-repeat:no-repeat;
	padding:70rpx 30rpx 0rpx;
	box-sizing: border-box;
	display:flex;
	justify-content: center;
	align-items: center;
	color:#eee;
	.box{
		width:100%;
		height:100%;
		overflow-y:auto;
		/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
		&::-webkit-scrollbar {
		  width: 13px;
		  // background-color: red;
		}
		
		/*定义滚动条轨道 内阴影+圆角*/
		&::-webkit-scrollbar-track {
		  // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		  border-radius: 10px;
		  background-color: transparent;
		}
		
		/*定义滑块 内阴影+圆角*/
		&::-webkit-scrollbar-thumb {
		  border-radius: 10px;
		  // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		  background-color: transparent;
		}
		/*定义最上方和最下方的按钮*/
		&::-webkit-scrollbar-button {
		  // border-radius: 10px;
		  // height: 0px;
		  // background-color: transparent;
		}
		.item{
			width:100%;
			color:#eee;
			font-size:24rpx;
			display:flex;
			justify-content: flex-start;
			align-items: center;
			margin:30rpx 0rpx;
			padding-left:20px;
			box-sizing: border-box;
			overflowL:hidden;
			.symbol,.money,.name,.prize{
				white-space:nowrap;
				letter-spacing:4rpx;
			}
			.symbol{
				margin:0 15rpx;
			}
			.money{
				margin-left:6rpx;
			}
			
		}
	}
}
</style>
